import {defineComponent} from 'vue'
import {cloneDeep} from "lodash-es";

/**
 * 思考一个问题：如何让选择组件只有点击确定按钮的时候才更新model的值 <br/>
 * 但是在外部数据更新的时候也必要更新自己的值<br/>
 * <br/>
 * 这个问题就是如何处理好这个计算属性的get和set
 * <br/>
 *     modelValueAsync: {
 *       get() {
 *         return this.modelValue
 *       },
 *       set(val) {
 *         this.$emit('update:modelValue',val)
 *         this.$nextTick(this.getList)
 *         this.selectFileName = ''
 *       }
 *     },
 */
export const SelectConfigToModelMixin = defineComponent({
  props: {
    modelValue: {
      type: Object,
      default: () => {
      }
    }
  },
  watch: {
    modelValue: {
      deep: true,
      immediate: true,
      handler() {
        /**
         * 外部数据更新的时候也必要更新自己的值<br/>
         * 这个就是相当于计算属性的get方法
         */
        this.setModelValueAsync(cloneDeep(this.modelValue))
        this.modelValueSource = cloneDeep(this.modelValue)
      }
    }
  },
  data() {
    return {
      modelValueAsync: undefined,
      modelValueSource: undefined,
    }
  },
  emits: ['update:modelValue','config'],
  methods: {
    btnConfigClick() {
      this.modelValueSource = cloneDeep(this.modelValueAsync)
      let modelValueSource = cloneDeep(this.modelValueAsync)
      this.btnConfigCenterFunc()
      this.$nextTick(() => {
        this.$emit('config', modelValueSource)
      })
    },
    /**
     * 这个方法用来重写
     */
    btnConfigCenterFunc() {
      this.closeDialog()
    },
    closeDialog() {
      this.setModelValueAsync(cloneDeep(this.modelValueSource))
      this.$emit('update:modelValue', this.modelValueSource)
    },
    /**
     * 这个方法很重要，相当于计算属性的set方法，不能用监听，会出现双向监听问题
     * @param val
     */
    setModelValueAsync(val) {
      this.modelValueAsync = val
    }
  }
})
